<template>
  <div  >
    <div class="box-header">
      <h1>
        <i class="el-icon-user title-logo" />
        {{ $t('task.export_task_center') }}
      </h1>
    </div>
    <hr class="mb-2" />

<div style="padding: 12px 16px 10px 16px; background-color: #f4f4f5; border: solid 1px #ebeef5; border-radius: 4px; margin-bottom: 4px">

  <i class="el-icon-warning center" style="color: #909399; font-size: 16px;" />
  <span style="color: #909399;">
    {{ $t('task.remain_tip') }}
  </span>

</div>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      @current-change="currentChangeHandle"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageIndex"
    >
      <div class="search-box">
        <el-form @submit.prevent.native inline>
          <el-form-item>
            <el-input
              v-model="searchName"
              size="small"
              style="width: 250px"
              :placeholder="$t('task.name')"
              maxlength="128"
              @keyup.enter.native="fetchData"
              @blur="() => (this.searchName = this.searchName.trim())"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchStatus"
              :placeholder="$t('task.task_status')"
              size="small"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchType" :placeholder="$t('task.task_type')" size="small">
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="p-2"
              size="medium"
              @click="fetchData"
            >
              <i class="el-icon-search" />
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="p-2"
              size="medium"
              @click="clearSearch"
            >
              <i class="el-icon-refresh-right" />
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        v-loading="listLoading"
        :data="tableData"
        :show-overflow-tooltip="true"
      >
        <el-table-column prop="taskTitle" :label="$t('task.name')" />
        <el-table-column
          prop="status"
          :label="$t('task.task_type')"
          align="center"
          width="200px"
        >
          <template v-slot="{row}">
            {{ getTypeLabel(row.taskCode) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('common.status')"
          align="center"
          width="200px"
        >
          <template v-slot="{row}">


    <el-tag :type="getStatusClass(row.status)">{{
              getStatusLabel(row.status)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.description')"
          align="center"
          width="180px"
        >
          <template v-slot="{row}">
            <div>
            {{ row.remark? row.remark : '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.create_time')"
          align="center"
          width="160px"
        >
          <template v-slot="{row}">
            <div :title="timeFilter(row.creTime)">
              {{ dateFilter( row.creTime ) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('task.finish_time')"
          align="center"
          width="160px"
        >
          <template v-slot="{row}">
            <div :title="timeFilter(row.finishTime)">
              {{ dateFilter( row.finishTime ) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('task.process')"
          align="center"
          width="250px"
        >
          <template v-slot="{row}">
            <el-tooltip class="item" effect="dark" :content="row.processCount+ '/' + row.taskDetailCount" placement="top-start">
      <el-progress
      :text-inside="true"
      :stroke-width="24"
      :percentage="calcPercent(row.processCount, row.taskDetailCount)"
      />
    </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="left" width="50">
          <template v-slot="scope">
            <div
              v-if="scope.row.filePath === 'File'"
              class="square-button cursor-pointer"
              @click="doDownland(scope.row.downloadUrl)"
            >
              <i class="el-icon-download" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getTaskList, getDownloadUrl } from '@/api/app'
import { timeFilter, dateFilter } from '@/filters'
const status = {
  FAILED: [3, 0],
  SUCCESS: 1,
  PENDING: [5, 7, 9]
}
export default {
  data() {
    return {
      statusOptions: [
        {
          value: '1',
          label: this.$t('task.status.success')
        },
        {
          value: '3',
          label: this.$t('task.status.failed')
        },
        {
          value: '5',
          label: this.$t('task.status.processing')
        },
        {
          value: '7',
          label: this.$t('task.status.queue')
        },
        {
          value: '9',
          label: this.$t('task.status.unexecuted')
        }
      ],
      typeOptions: [
        {
          value: 'Admin[App_Report_Devices]',
          label: this.$t('task.type.app_report')
        },
        {
          value: 'Admin[Batch_Import_Devices]',
          label: this.$t('task.type.batch_import')
        },
        {
          value: 'Admin[Batch_Export_Devices]',
          label: this.$t('task.type.batch_export')
        }
      ],
      searchName: '',
      searchType: '',
      searchStatus: '',
      status: Object.freeze(status),
      tableData: [],
      listLoading: false,
      condition: {},
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    timeFilter,
    dateFilter,
    clearSearch() {
      this.searchName = ''
      this.searchStatus = ''
      this.searchType = ''
      this.pageIndex = 1
      this.fetchData()
    },
    doDownland(downloadUrl) {
      getDownloadUrl(downloadUrl).then((res) => {
        window.location.href = res.url
      })
    },
    calcPercent(successCount, taskDetailCount) {
      return taskDetailCount ? Number(((successCount / taskDetailCount) * 100).toFixed(2)): 0
    },
    getStatusClass(taskStatus) {
      if (taskStatus === 5) {
        return 'warning'
      } else if (taskStatus === 7) {
        return 'warning'
      } else if (taskStatus === 9) {
        return 'warning'
      } else if (taskStatus === 3) {
        return 'danger'
      } else {
        return 'success'
      }
    },
    getStatusLabel(taskStatus) {
      let statusLabel = this.statusOptions.find((item) => {
        return item.value == taskStatus
      })
      if (statusLabel) {
        return statusLabel.label
      } else {
        return taskStatus
      }
    },
    getTypeLabel(taskCode) {
      let taskLabel = this.typeOptions.find((item) => {
        return item.value == taskCode
      })
      if (taskLabel) {
        return taskLabel.label
      } else {
        return taskCode
      }
    },
    fetchData() {
      this.listLoading = true
      const condition = {}
      if (this.searchName) {
        condition.taskTitle = this.searchName
      }
      if (this.searchStatus) {
        condition.status = this.searchStatus
      }
      if (this.searchType) {
        condition.taskCode = this.searchType
      }
      getTaskList({
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
        ...condition
      })
        .then((res) => {
          this.listLoading = false
          this.tableData = res.data
          this.totalPage = res.rows
        })
        .catch((e) => {
          this.listLoading = false
          this.$confirmError(e)
        })
    },
    currentChangeHandle(val) {
      this.pageIndex = val
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
.square-button {
  height: 32px;
  width: fit-content;
  border-radius: 4px;
  line-height: 24px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #dcdfec;
}

.toolbar-text {
  /*color: #ccd3d9;*/
  --tw-text-opacity: 1;
  color: rgba(149, 170, 201, var(--tw-text-opacity));
}
</style>
